import React,{Component,Fragment}from "react";

@Appwrapper({})
class Demo extends Component {
    state = {
        config: {

        }
    }
    componentDidMount () {
        setTimeout(() => {
            this.setState({config:{width:1000}})
        }, 3000);
    }
    render () {
        return (
            <div>
                1111
            </div>
        )
    }
}
export default Demo
// 装饰器是用来修改传入的组件
function Appwrapper (config={}) {
    return function (Component) {
        let old_render = Component.prototype.render
        let initConfig = {width:100,height:100,hideFooter:false}
        Component.prototype.render = function () {
            const  finalConfig = this.state.config ? Object.assign(initConfig,this.state.config) : initConfig
            let {width,height} = finalConfig
            return (
                <Fragment>
                     <div>装饰器头</div>
                     <div>装饰器宽{width}</div>
                     <div>装饰器高{height}</div>
                     {old_render()}
                     <div>装饰器尾</div>
                </Fragment>
               
            )
        }
    }
}



